<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>注册</title>
	<meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
	<meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
	<meta name="author" content="Codrops" />
	<link rel="shortcut icon" href="../favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
	<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
	<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">

	<div class="fs-form-wrap" id="fs-form-wrap">
		<div class="fs-title">
			<h1>摄影集结地</h1>

		</div>
		<form id="myform" class="fs-form fs-form-full" autocomplete="off">
			<ol class="fs-fields">
				<li>
					<label class="fs-field-label fs-anim-upper" for="q1">请输入您的名字:</label>
					<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="您的名字" required/>
				</li>
				<li>
					<label class="fs-field-label fs-anim-upper" for="q2" data-info="We won't send you spam, we promise...">您的电子邮件地址是什么?</label>
					<input class="fs-anim-lower" id="q2" name="q2" type="email" placeholder="jq22@com" required/>
				</li>
				<li>
					<label class="fs-field-label fs-anim-upper" for="q3">请输入密码：</label>
					<input class="fs-anim-lower" id="q3" name="q3" type="password" placeholder="输入密码" required/>
				</li>
				<li>
					<label class="fs-field-label fs-anim-upper" for="q4">再次输入密码：</label>
					<input class="fs-anim-lower" id="q4" name="q4" type="password" placeholder="确认密码" required/>
				</li>


			</ol><!-- /fs-fields -->
			<button class="fs-submit" type="submit">提交</button>
		</form><!-- /fs-form -->
	</div><!-- /fs-form-wrap -->



</div><!-- /container -->
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<script src="js/fullscreenForm.js"></script>
<script>
    (function() {
        var formWrap = document.getElementById( 'fs-form-wrap' );

        [].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
            new SelectFx( el, {
                stickyPlaceholder: false,
                onChange: function(val){
                    document.querySelector('div.cs-placeholder').style.backgroundColor = val;
                }
            });
        } );

        new FForm( formWrap, {
            onReview : function() {
                classie.add( document.body, 'overview' ); // for demo purposes only
            }
        } );
    })();
</script>
</body>
</html>